﻿@model MobileWebsiteGenerator.Models.MainViewModel
        @{
    char[] type = new char[] { ',' };

    var SwatchData = Model.MyTheme.Swatch.Split(type);
    var listtext = SwatchData[0];
    var listBG = SwatchData[1];
    var hoverBg = SwatchData[2];
    Layout = "~/Views/Shared/_Layout.mobile.cshtml";
    
}
               

<style type="text/css">

 #PageContainer
    {
       background-color: @Model.MyTheme.backgroundColor;
   background-image:url('@Url.Content("~/uploads/" + Model.MyTheme.backgroundImage)');
        border: 1px solid #fff;        
        margin: 0px;
        padding: 0px;
        margin-left:2px;

    
       position:relative;
    }
    #PageContainer span
    {
        line-height: 20px;
        letter-spacing: 1px;
        margin-top: 15px;
    }
    #header
    {
         background-color: @Model.MyTheme.Headercolor;
        height: 40px;
        vertical-align:top;  
        margin-top:-15px;
        color:@Model.MyTheme.HeadertextColor;
       
      
        color:@Model.MyTheme.HeadertextColor;
        background-image: url('@Url.Content("~/uploads/" + Model.MyTheme.HeaderImage)');
        text-align: center;
    }
    .footer
    {
        height: 40px;
        text-align: center;
           vertical-align:bottom;
        color:@Model.MyTheme.FootertextColor;
        margin-top:7px;
        color:@Model.MyTheme.FootertextColor

        background-color: Black;
    }


    ul.metroui-list
    {
   
        list-style: none;
        padding-left: 20px;
         padding-right: 20px;
         
          margin:5;
    }
    
    ul.metroui-list li
    {
     
        padding: 5px;
        margin-top:2 px;
        color:@listtext;
        margin-bottom: 15px;
        background-color:@listBG;
        
        cursor: pointer;
      
            border: 2px solid @Model.MyTheme.Border;
        background-image:url('@Url.Content("~/uploads/" + Model.MyTheme.ButtonPicture)');
    }
    
    ul.metroui-list li:hover
    {
    background-color:@hoverBg;
    }
    
    li.metroui-list-selected
    {
        background-color: #4e534b !important;
        color:red;
    }
</style>

  @if (MobileWebsiteGenerator.MvcApplication._MainCustomer.MyTheme.Isheader == true)
  {

    <div style="top: 0px; width: auto; position: static;" id="header">
        <h4>@Model.MyTheme.HeaderText</h4>
    </div>
  }